<template>
    <div :style="{ display: 'flex' }">
        <a-card id="carddemo" :style="{ width: '1280px'}"  hoverable bordered>
            <template #extra>

                {{MessageVO.user?.userName ?? '无名'}}
                <a-avatar :size="24" >
                    <img :src="MessageVO.user?.userAvatar ?? myAvatar">
                </a-avatar>
            </template>

            <MdViewer :value="MessageVO.content || ''"></MdViewer>

        </a-card>
    </div>
</template>

<script setup lang="ts">

import {myAvatar} from "@/constant/photo";
import MdViewer from "@/components/MdViewer.vue";

  interface Props{
      MessageVO:API.MessageVO
  }
  const props = withDefaults(defineProps<Props>(),{
      MessageVO:() =>{
          return {};
      }
  })
</script>

<style scoped>

</style>